<template>
  <div>App</div>
  <!-- 读取数据 -->
  <p>{{ counterStore.count }}</p>
  <p>{{ counterStore.oddOrEven }}</p>
  <p>{{ count }}</p>
  <button @click="update">+</button>
  <button @click="update1">-</button>
  <button @click="update2">更新多个数据</button>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<script lang="ts" setup>
import { useCounterStore } from "./store/modules/counter";

// 调用函数得到counter模块的store对象
// store对象就有counter模块的所有数据和方法，并且数据和方法都进行了数据代理
const counterStore = useCounterStore();
// 解构失去响应式
const { count } = useCounterStore();

/*
  更新pinia数据的方法：
    1. 如果需要发送请求，就需要定义action函数，调用action函数修改
    2. 如果直接更新数据
      - 更新一个数据：直接更新
      - 更新多个数据：$patch方法更新
*/

const update = () => {
  // 更新数据
  counterStore.increment(1, 2, 3, 4, 5);
};

const update1 = () => {
  // 直接更新数据
  counterStore.count--;
};

const update2 = () => {
  counterStore.$patch({
    count: counterStore.count - 1,
    person: {
      age: counterStore.person.age - 1,
    },
  });
};
</script>

<style scoped></style>
